<template>
	<div class="test">
		<h1>{{title}}</h1>
		<p>{{user.firstName}}</p>
		<p v-text="user.lastName"></p>
		<ul><li v-for="item in items">{{item.title}}</li></ul>
		<button v-on:click="greet">onononon</button>
		<lable>First Name:</lable>
		<input type="text" v-model="user.firstName">
		<br>
		<lable>Last Name:</lable>
		<input type="text" v-model="user.lastName">
		<h3>{{fname}}</h3>
	</div>
</template>

<script>
	export default{
		name:"test",
		data(){
			return{
				title:"Hello",
				user:{
					firstName:"aa",
					lastName:"bb"
				},
				items:[
				    {title:"item 1"},
				    {title:"item 2"},
				    {title:"item 3"}
				]

			}
		},
			methods:{
				greet:function(){
					alert("aaa")
				}
			},
			computed:{
				fname:function(){
					return this.user.firstName + "" +this.user.lastName
				}

			}
	}
</script>

<style scoped>
	
</style>